<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      #wrap{
        width: 80%;
        margin: 20px auto;
      }
      table{
        width: 600px;

      }
      td{
        text-align: center;
      }
  </style>
</head>
<body>
  <div id="wrap">
    <div>
     姓名： <input type="text" id="username">
     年龄：<input type="text" id="age">
    </div>
    <div>
      <input type="radio"  name="sex" class="sex" value="男" checked>男
      <input type="radio" name="sex"  class="sex" value="女">女
    </div>
    <div>
      <button id="add">添加</button>
      <button id="order">按年龄排序</button>
    </div>
    <div>
      <input id="searchText" type="text" placeholder="输入姓名">
      <button id="searchBtn">搜索</button>
    </div>
    <div>
      <table border="1">
        <thead>
          <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="tbody">
          <!-- <tr>
            <td>1</td>
            <td>小王  </td>
            <td>18</td>
            <td>男</td>
            <td>
              <button>删除</button>
            </td>
          </tr> -->
        </tbody>
      </table>
    </div>
  </div>
    <script>
        // 1.假设在localStorage里有一个数组
        if(!localStorage.personList){
          localStorage.personList="[]"
        }
        // 2.添加
      var add=document.getElementById("add");
      var username=document.getElementById("username");//用户名输入框
      var age=document.getElementById("age");//年龄输入框
      var sexs=document.querySelectorAll(".sex")//取出俩个单选框
      add.onclick=function(){
        // 性别收集
        // 如果男的单选框 为true 存储男 否则存储女
        var sexStr=sexs[0].checked ? "男" : "女"
        // 收集一个对象 添加到localStorage准备好的数组中
        var obj={
          id:new Date().getTime(),//1647475475
          username:username.value,//用户名
          age:age.value, //年龄
          sex:sexStr, //性别
        }
        // 非空判断
        if(username.value&&age.value){
          // 1. 先取出localStorage中的数组
          var  arr=JSON.parse(localStorage.personList);
            // 2.把整理好的对象添加到数组
            arr.push(obj)
         // 3. 将添加好的数组设置会localStorage
          localStorage.personList=JSON.stringify(arr)
          // 每次添加完成 清空输入框
          username.value=""
          age.value=""
          // 添加完成后 调用渲染函数
          loadList()
        }else{
          alert("输入的信息不完整")
        }
      }
      // 渲染函数
      var tbody=document.getElementById("tbody")
      function loadList(){
          // 取出localStorage存储的数据 
          var arr=JSON.parse(localStorage.personList);
          // 取出的数组 循环生成tr 放到tbody
          loadTr(arr)
      }
      loadList();

      // 删除方法
      function del(id){
          // 取出localStorage中数组 
          var arr=JSON.parse(localStorage.personList);
          // 通过当前id 和localStorage中的对比 
          arr.forEach(function(item,index){
            if(id==item.id){
              // 找到数组并删除
              arr.splice(index,1) //从当前找到的下标处删除
            }
          })
          // 将删除后的数组 设置回localStorage
          localStorage.personList=JSON.stringify(arr)
          // 删除后 从新渲染
          loadList();
      }
      // 点击排序 
      var order=document.getElementById("order");
      var num=0;
      order.onclick=function(){
        // 取出localStorage 数组
        var  arr=JSON.parse(localStorage.personList);
        // 进行排序
        if(num%2==0){
          arr.sort(function(a,b){
              return b.age-a.age //降序
          })
        }else{
          arr.sort(function(a,b){
              return a.age-b.age //升序
          })
        }
        num++;
        console.log(arr)
        // 把排序好的arr 循环生成tr 放到tbody
        loadTr(arr)
      }
      // 搜索方法
      var searchBtn=document.getElementById("searchBtn");//搜索按钮
      var searchText=document.getElementById("searchText");//搜索输入框
      searchBtn.onclick=function(){
        // 取出localStorage中的数组 
        var arr=JSON.parse(localStorage.personList);
        // 根据输入的搜索名称 去查找对应的数据
        arr=arr.filter(function(item){//过滤符合条件的数组
            return item.username.includes(searchText.value)
        })

        console.log(arr)
        //    用搜索过滤好的数组 生成tr 放到tbody
        loadTr(arr)
      }

      // 根据数组循环生成tr放到tbody
      function loadTr(arr){
          var str=``
          for(var i=0;i<arr.length;i++){
            // arr[i]--数组的每一项
            str+=` <tr>
                <td>${i+1}</td>
                <td>${arr[i].username} </td>
                <td>${arr[i].age}</td>
                <td>${arr[i].sex}</td>
                <td>
                  <button onclick="del(${arr[i].id})">删除</button>
                </td>
              </tr>`
          }
          // 把生成的所有tr 放到tbody中
          tbody.innerHTML=str;
      }
  </script>
</body>
</html>